<template>
  <view class="search-row-box flex justify-center h-68rpx">
    <view class="search-row flex flex-nowrap items-center justify-center" :style="styles">
      <wd-search
        v-model="keyword"
        custom-class="mr-8rpx flex-grow-1"
        placeholder="请输入关键词搜索"
        placeholder-left
        hide-cancel
        @clear="debounceOnClick"></wd-search>
      <wd-button custom-class="inner-btn btn search-btn h-52rpx" @click="debounceOnClick">搜索</wd-button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import type { BaseEvent } from "@uni-helper/uni-app-types";
import { debounce } from "lodash-es";
import type { CSSProperties } from "vue";
import type { Emits, Props, Slots } from "./types.ts";
import { eliminateUndefined, withUnit } from "@/utils/helper.ts";

defineOptions({
  name: "SearchRow",
  options: {
    virtualHost: true,
    styleIsolation: "shared"
  }
});
const props = withDefaults(defineProps<Props>(), {
  plain: false,
  round: true,
  disabled: false,
  hairline: false,
  block: false,
  loading: false,
  hoverStopPropagation: false,
  showMessageCard: false,
  debounceTime: 0
});
const emit = defineEmits<Emits>();
defineSlots<Slots>();
const keyword = ref("");
const styles = computed(() => {
  const value: CSSProperties = {};

  if (props.round) {
    value.borderRadius = withUnit(props.radius);
  }

  return eliminateUndefined(value, true);
});

function onClick(event: BaseEvent): void {
  emit("click", event);
}

const debounceOnClick = debounce(onClick, props.debounceTime, { leading: true, trailing: false });
</script>

<style lang="scss">
.search-row {
  .wd-search {
    padding: 0;
    .wd-search__block {
      background-color: transparent;
    }
  }
  .search-btn {
    height: 52rpx !important;
    padding: 0 !important;
    border-radius: 26rpx !important;
    width: 130rpx !important;
    min-width: auto !important;
    flex-grow: 0;
  }
}
</style>

<style lang="scss" scoped>
.search-row {
  padding-right: 8rpx;
  width: calc(100vw - 64rpx);
  z-index: 999;
  background-color: var(--color-white);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 34rpx;
  .wd-search {
    padding: 0;
    .wd-search__block {
        background: transparent;
      }
  }
}
</style>